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CLIENT SIDE LOCALIZATIONS ON THE WORLD WIDE WEB 

Technical Field of the Invention 
The present invention relates to the field of network browsing software and, in 
particular, to a method of translating (Le. localizing) a Web page from one language to 
another language (e.g. English to French). 

Background of the Invention 

In recent years, there has been a tremendous proliferation of computers connected 
to a global network known as the Internet. A "client" computer connected to the Internet 
can dovmload digital information from "server" computers connected to the Intemet. 
Client application and operating system software executing on client computers typically 
accepts commands from a user and obtains data and services by sending requests to 
server applications running on server computers connected to the Intemet. A number of 
protocols are used to exchange commands and data between computers connected to the 
Intemet. The protocols include the File Transfer Protocol (FTP), the Hyper Text Transfer 
Protocol (HTTP), the Simple Mail Transfer Protocol (SMTP), and other protocols. 

The HTTP protocol is used to access data on the World Wide Web, often referred 
to as "the Web." The World Wide Web is an information service on the Intemet 
providing documents and links between dociunents. The World Wide Web is made up of 
numerous Web sites around the world that maintain and distribute Web documents (i.e. 
otherwise known as Web pages). 
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A Web site may use one or more Web server computers that are able to store and 
distribute documents in one of a number of formats including the Hyper Text Markup 
Language (HTML). An HTML document can contain text, graphics, audio clips, and 
video clips, as well as metadata or commands providing formatting information. HTML 
5 documents also include embedded "links" that reference other data or documents located 
on the local computer or network server computers. 

A Web browser is a client application, software component, or operating system 
utility that communicates with server computers via FTP, HTTP, and Gopher protocols. 
Web browsers receive Web documents from the network and present them to a user. 
10 Internet Explorer, available from Microsoft Corporation, of Redmond, Washington, is an 
example of a popular Web browser. As long a Web document is in a computer readable 
format, such as HTML, a Web browser is able to display the Web document to a user, 
^iui regardless of the language of the text contained in the Web document {e.g. English, 

Is, French, Italian, German, Spanish, Japanese, etc.). Ahhough the Web browser is able to 

tj 15 display the text of the Web document, the text is frequently in a language that is foreign 
to, and thus unreadable by, the user. This is a significant limitation of the Web. 

In the past, Web document and Web site developers have attempted to solve this 
problem by manually translating each Web document into separate languages. More 
particularly, developers would create a separate Web page with its own uniform resource 
20 locator (URL) for each desired language. Under this approach, each translated Web page 
is transmitted separately. Thus, this approach requires large volumes of data and 
increases network transmission. In addition, this approach is very time consuming, costly 
and inefficient. 
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Accordingly, it is an object of the present invention to provide a method of 
allowing users to immediately translate electronic files, such as Web documents, into the 
language of their choice. 




5 Siunmarv of the Invention 

The method of the present invention allows users to immediately translate 
electronic files, such as Web documents, into the language of their choice. In this 
method, each phrase and/or word in the Web document is assigned an identifier that 
corresponds to a translation for the phrase. (The present invention works identically for 
10 both phrases as well as individual words contained within a Web document. However, 
only the term "phrase" is referred to hereinafter.) The client is provided a copy of the 
Web document. A user is then able to select a language in which the user would like the 
Web document to be displayed. After the user makes his or her language selection, the 
identifiers in the Web document are used to replace each phrase in the Web document 
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Q 15 with the foreign language translation of the phrase. The foreign language translation is 



then substituted for each phrase in the Web document. If a translation for a particular 
phrase is not available, the particular phrase is not replaced. The resulting Web 
document is then displayed to the user on a Web browser on the client. 

20 Brief Descripfion of the Drawings 

The present invention may take physical form in certain parts and steps, 
embodiments of which will be described in detail in this specification and illustrated in 
the accompanying drawings which form a part hereof, wherein: 
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FIGURE 1 is a block diagram of a general-purpose computer system for 
implementing the present invention; 

FIGURE 2 illustrates a Web browser displaying an English language version of a 
sample Web document prepared in accordance with the present invention; 
5 FIGURE 3 depicts the Web browser and Web document of Figure 2, in which the 

select box of available languages is shown; 

FIGURE 4 shows the Web browser displaying a French translation of the Web 
document depicted in Figure 2; 

FIGURE 5 illustrates the Web browser displaying a Spanish translation of the 
10 Web document depicted in Figure 2; and 

FIGURE 6 shows the Web browser displaying a German translation of the Web 
document illustrated in Figure 2. 



|V Detailed Description of the Invention 

s 

, 3 15 As illustrated in Figures 2-6, the present invention provides a method of enabling 

*: a? 

multiple, concurrent, language translation (i.e. localization) of Web pages within a Web 
browser 200. The method allows users to immediately translate prepared pages into the 
languages of their choice (including double byte character sets) without requiring 
additional transmissions across the network. In addition, the present invention obviates 
20 the current practice of site owners producing separate Web pages for each language to be 
supported. 

In this invention, a client downloads from a server a translation for each phrase 
contained in a Web page 202. The downloaded phrases are transferred from the server to 
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the client in the form of a data structure. The data structure can be in an included file or 
provided by some other mechanism. The present invention supports dynamic changing 
of languages and the concurrent display of multiple languages. In addition, neither the 
Web page nor the localized (i.e. translated) phrases need to be compiled. Further, each 
5 phrase library self-registers itself, and phrases may contain display information (e.g. 
HTML tags) including localized graphics and media files. 

Once the phrase translations have been downloaded fi-om a server to the cUent, a 
Web browser 200 replaces each phrase in the Web document 202 with its corresponding 
phrase translation. The resulting Web document 202 is then displayed by the Web 

y 10 browser 200. 

Q 

In accordance with the present invention, a Web browser 200 executes on a 
computer, such as a general-purpose personal computer. FIGURE 1 and the following 

y 

discussion are intended to provide a brief, general description of a suitable computing 

J 

as 

V environment in which the invention may be implemented. Although not required, the 

3 15 invention will be described in the general context of computer-executable instructions, 
such as program modules, being executed by a personal computer. Generally, program 
modules include routines, programs, objects, components, data structures, etc. that 
perform particular tasks or implement particular abstract data types. Moreover, those 
skilled in the art will appreciate that the invention may be practiced with other computer 
20 system configurations, including hand-held devices, multiprocessor systems, 
microprocessor-based or programmable consumer electronics, network PCs, 
minicomputers, mainfi-ame computers, and the like. The invention may also be practiced 
in distributed computing environments where tasks are performed by remote processing 



id 



5 



MS No. 126571.1 
B&W No. 3797.77742 

devices that are linked through a communications network. In a distributed computing 
environment, program modules may be located in both local and remote memory storage 
devices. 

With reference to FIGURE 1, an exemplary system for implementing the 
5 invention includes a general purpose computing device in the form of a conventional 
personal computer 20, including a processing unit 21, a system memory 22, and a system 
bus 23 that couples various system components including the system memory to the 
processing unit 21. The system bus 23 may be any of several types of bus structures 
-3 including a memory bus or memory controller, a peripheral bus, and a local bus using any 

LJ 10 of a variety of bus architectures. The system memory includes read only memory (ROM) 
24 and random access memory (RAM) 25. A basic input/output system 26 (BIOS), 
containing the basic routines that helps to transfer information between elements within 
L the personal computer 20, such as during start-up, is stored in ROM 24. The personal 

f ?? 

u computer 20 further includes a hard disk drive 27 for reading from and writing to a hard 

k.j 15 disk, not shown, a magnetic disk drive 28 for reading from or writing to a removable 
magnetic disk 29, and an optical disk drive 30 for reading from or writing to a removable 
optical disk 31 such as a CD ROM or other optical media. The hard disk drive 27, 
magnetic disk drive 28, and optical disk drive 30 are connected to the system bus 23 by a 
hard disk drive interface 32, a magnetic disk drive interface 33, and an optical drive 
20 interface 34, respectively. The drives and their associated computer-readable media 
provide nonvolatile storage of computer readable instructions, data structures, program 
modules and other data for the personal computer 20. Although the exemplary 
environment described herein employs a hard disk, a removable magnetic disk 29 and a 
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removable optical disk 31, it should be appreciated by those skilled in the art that other 
types of computer-readable media which can store data that is accessible by a computer, 
such as magnetic cassettes, flash memory cards, digital versatile disks, Bernoulli 
cartridges, random access memories (RAMs), read only memories (ROM), and the like, 
5 may also be used in the exemplary operating environment. 

A number of program modules may be stored on the hard disk, magnetic disk 29, 
optical disk 31, ROM 24 or RAM 25, including an operating system 35, one or more 
application programs 36, other program modules 37, and program data 38. A user may 
s enter commands and information into the personal computer 20 through input devices 
LJ 10 such as a keyboard 40 and pointing device 42. Other input devices (not shown) may 
include a microphone, joystick, game pad, satellite dish, scanner, or the like. These and 
other input devices are often connected to the processing unit 21 through a serial port 

i y 

interface 46 that is coupled to the system bus, but may be connected by other interfaces, 
such as a parallel port, game port or a universal serial bus (USB). A monitor 47 or other 
^3 15 type of display device is also connected to the system bus 23 via an interface, such as a 
video adapter 48. One or more speakers 57 are also connected to the system bus 23 via 
an interface, such as an audio adapter 56. In addition to the monitor and speakers, 
personal computers typically include other peripheral output devices (not shown), such as 
printers. 

20 The personal computer 20 may operate in a networked environment using logical 

connections to one or more remote computers, such as remote computers 49 and 60. 
Each remote computer 49 or 60 may be another personal computer, a server, a router, a 
network PC, a peer device or other common network node, and typically includes many 
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or all of the elements described above relative to the personal computer 20, although only 
a memory storage device 50 or 61 has been illustrated in FIGURE 1. The logical 
connections depicted in FIGURE 1 include a local area network (LAN) 51 and a wide 
area network (WAN) 52, Such networking environments are commonplace in offices, 
enterprise-wide computer networks, intranets and the Internet. As depicted in FIGURE 
1, the remote computer 60 communicates with the personal computer 20 via the local 
area network 5 1 . The remote computer 49 communicates with the personal computer 20 
via the wide area network 52. 

When used in a LAN networking environment, the personal computer 20 is 
connected to the local network 51 through a network interface or adapter 53. When used 
in a WAN networking environment, the personal computer 20 typically includes a 
modem 54 or other means for establishing communications over the wide area network 
52, such as the Intemet. The modem 54, which may be internal or extemal, is connected 
to the system bus 23 via the serial port interface 46. In a networked environment, 
program modules depicted relative to the personal computer 20, or portions thereof, may 
be stored in the remote memory storage device. It will be appreciated that the network 
connections shown are exemplary and other means of establishing a communications link 
between the computers may be used. 

In the present invention, a list of phrases (and/or words) in the HTML page(s) to 
be localized (Le. translated) is obtained. Each phrase is assigned a unique identifier. Any 
type of identifier could be used including, but not limited to, ASCII characters, ASCII 
numbers, alpha-numeric combinations, binary control codes, other numeric 
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representations, etc. In one embodiment, ASCII numbers are used as the unique 



identifiers. 



After unique identifiers have been assigned, each phrase is locahzed and then 
stored in a data structure supported by the Web browser 200. An example of this is 
5 shown below. Although this example is written in JavaScript, any scripting or 
programming language could be utilized. JavaScript is an open scripting language that is 
supported by many Web browsers, and anyone can use this scripting language without 
purchasing a license. JavaScript can interact with HTML source code and enables Web 
1=3 authors to design interactive sites that include dynamic content. 

I^y 10 //this comes from file 1036.1cid 

□ function LCID10360 { var L=new Array;L[0]="Cree par Monsieur Lassesen"; 

0 L[l]- 'Changez Le Mot de passe "; 

L[2]=" Vous etes pries de changer le mot de passe de ce compte. Veuillez le 
changer ci-dessous. Vous pouvez changer votre email (et cette identification de 
15 PROCEDURE DE CONNEXION) en choisissant ' mon information ' sous des 

utilitaires dans Tarbre du cote gauche. "; 

1 n L[3]- 'La bienvenue au cUent enregistre "; 
l:^ L[4]=" Entrez Le Nouveau Mot de passe: 

U L[5]- 'Confirmez Le Nouveau Mot de passe 

Q 20 L[6]="Des mots de passe sont exiges pour etre au moins 6 caracteres longtemps, 

w incluent des lettres majuscules et minuscules et un nombre. "; 

L[23]="Ce site exige le Microsoft Intemet Explorer 4,01 ou plus haut 

return L}; 

languages[languages.length]=[' French(Standard)',1036,LCID1036 Q]; 

25 

In the above example, each language self-registers itself into an array called 
languages, allowing dynamic addition of localization after the page to be displayed is 
downloaded. 

In a typical application, if the user has selected more than one language, then a 
30 select box 204, Icid, appears on the page displaying the name of the available languages 
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when the tranonloadQ procedure is executed. The tranonloadQ enumerates the available 
languages 300 in this select box 204. 
<BODY onload=tranonloadO> 

<SELECT onchange=TRO class=lcid name=lcidx/Select> 

<SCRIPT LANGUAGE=JAVASCRIPT> 

function tranonloadQ { 

for(i=0;i<languages.length;i-H-) { 

lcid[lcid.length]=new Option(languages[i][0]) //English Title 

lcid[lcid.length- 1 ]. value=languages[i] [ 1 ] //LCID] 

} 

} 

When the user selects another language, the Web document 202 is preferably 
searched and phrases are replaced using DHTML. Dynamic HTML (DHTML) refers to 
Web content that capable of changing each time the Web page is viewed. For example, 
the same URL could result in a different page depending on any number of parameters, 
such as: geographic location of the reader, time of day, previous page(s) viewed by the 
reader, and profile of the reader. Currently, there are many technologies for producing 
DHTML, including CGI scripts, Server-Side Includes (SSI), cookies, Java, JavaScript, 
and ActiveX®. Also, DHTML refers to new HTML extensions that enable Web pages to 
react to user input without sending requests to Web servers. In an alternate embodiment, 
Web documents are reconstructed using the localized phrases, if DHTML is not 
available. 

As shown below, the identifier for each phrase in the document is located. (In 
this example, the identifier is part of the class element's name.) After being located, the 
existing phrase is replaced with its translation — if available. If a translation for a 
particular phrase is not available, then the original text for that phrase will be maintained 
and displayed in the Web browser 200. 
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function TRO{ 

i=lcid.selectedlndex // Option (Language) the user selected 
var vlcid=lcid.options[i]. value //get the LCID 
var ilcid=0 

5 for(i=0;i<languages.length;i-H-) 

if(languages[i][l]=vlcid) //locate the row for the language 
ilcid=i 

search=document . all 
for(i=0;i<search.length;i-H-) { 
10 cn=search[i].className //look at each non-empty class name 

if (cn.length>0) 

{ //Look up translation 
txt=languages[ilcid][2][search[i].className] 
if (typeof(txt)— "string") //if one exists, replace the text 
15 if (txt.length > 0) search[i].innerHTML=txt 

} 

} 

} 

20 In place of a single language translation, translations from several languages may 

be concatenated and the result displayed instead. Furthermore, the translation may 

include HTML tags, allowing presentations (formatting, graphics, media files) 

I S appropriate for the language to be included. The Source HTML file appears normal 

u except for the addition of a identifier number to the cascading style sheet class name, as 

25 shown in the example below. 

<H1 Class=l> Change Password</Hl> 

<P Class=4.1abel> Enter New Password</P>. ... 

<DIV Class=4.password>Confirm Password </DIV> 

30 As previously mentioned, a person of ordinary skill in the art will recognize that there are 
many other ways to encapsulate the localization identifier in the HTML page. 

The placing of all localized phrases (/.e. translations) into a single include-file 
results in a single file download that may be used by all pages on a Web site with new 
downloads being required only when the translation-text changes. This may result in 

35 smaller file downloads for dynamic pages where the data changes but the text remains the 
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same (since all of the text may come for the localization file and thus exists in the 

browser cache). In addition, localization in accordance with the present invention does 

not require any knowledge of HTML. 

A sample implementation of the above-identified invention is shown in Figures 2- 

5 6. More particularly, Figure 2 illustrates a Web browser 200 displaying an English 

language version of a sample Web document 202 prepared in accordance with the present 

invention. The HTML source code for this Web document 202 {i.e. Web page) is as 

follows. 

n <html> 
I' 3 10 <head> 

hi <script LANGUAGE="JSCRIPT"> 

12 var ml=new Array 

]= ^ var 1 1 =new Array 

1;^ var 12=new Array 

1 5 var 13=new Array 

; var 14=new Array 

ll[3]="Identifing the phrases and connecting them to the LP (Localized 
1^ Phrases)requires some human and infi^astructure issues to be examined" 

12[3]="Identifmg les expressions et les relier au LP (les expressions localisees) 
M 20 exige quelques Thumain et issues d'infi-astructure a examiner " 

=.j 13[3]="Identifing las fi^ases y conectarlos con el LP (Phrases)requires localizado 

^3 algiin ser humano y ediciones de la infraestructura que se examinaran " 

14[3]="Identifing die Phrasen und AnschUeBen sie an die Langspielplatte 

(beschranktes Phrases)requires einiger Mensch und zu iiberpriifende 
25 Infi-astrukturausgaben " 

ll[l]='CHent Side Example* 

12[l]='Exemple Lateral De Client ' 

13[l]=*Ejemplo Lateral Del Cliente ' 

14[l]=*Klient SeitUches Beispiel ' 
30 II [4]="This page illustrates one approach." 

12[4]="Cette page illustre une approche. " 

13[4]="Esta paginacion ilustra un acercamiento. " 

14[4]="Diese Seite veranschaulicht eine Annaherung. " 

ll[5]="The page is written with 'class=#. {class name}'. This allows the entire 
35 document to be easily walked and all elements translated (if translation is 

available)" 
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12[5]="La page est ecrite avec le * nom de class=#. {class } Ceci permet au 
document entier d'etre facilement marche et tous les elements d'etre traduit (si la 
traduction est disponible) " 

13 [5]- 'La paginacion se escribe con * nombre de class=#. {class } Esto permite 
que el documento entero ser recorrida y todos los elementos sea traducido 
facilmente (si la traduccion esta disponible) " 

14[5]="Die Seite wird mit * class=#. {class-Namen } * geschrieben. Dieses erlaubt, 
wird daB das gesamte Dokument, leicht gegangen zu werden, ubersetzt und alle 
Elemente (wenn Ubersetzung vorhanden ist), " 

ll[ll]="Easy automatic extraction of the text into a database (page may be 

walked from another page, and strings extracted and entered)." 

12[1 1]- 'Extraction automatique facile du texte dans une base de donnees (la page 

pent etre marchee d'lme autre page, et ficelle extrait et entre). " 

13[11]- 'Extraccion automatica facil del texto en una base de datos (la paginacion 

se puede recorrer de otra paginacion, y encadena extraido y entrado). " 

14[ll]="Einfache automatische Extraktion des Textes in eine Datenbank (Seite 

kann von einer anderen Seite gegangen werden, und reiht extrahiert und 

hereingekommen auf), " 

ml[l]=ll 

ml[2]=12 

ml[3]=13 

ml[4]=14 

lp=ll 

</script> 

<title class="r'>Client Side Example</title> 
<body> 

<hl class="l">CUent Side Example</hl> 
<select name="lcid" onchange="translate()"> 
<option value=" 1 ">English</option> 
<option value="2">French</option> 
<option value="3">Spanish</option> 
<option value="4">German</option> 
</select> 

<p class="3">Identifing the phrases and connecting them to the LP (Localized 
Phrases) 

requires some human and infrastructure issues to be examined</p> 

<pxb class="4">This page illustrates one approach. </bxem class="5"> The 

page is written 

with 'class==#. {class name}'. This allows the entire document to be easily walked 
and all elements 

translated (if translation is available)</emx/p> 
<p> Some features are:</p> 

<olxli class="10"> Original text is shown if no translation</li> 
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<li class="H"> Easy automatic extraction of the text into a database (page may 
be 

walked from another page, and strings extracted and entered). </li> 

<h class="12"> No events collections are created (as with SPAN or DIV)</li> 

<li class="13"> Pages may be easily check by code (and translated)</li> 

</ol> 

<p align="center">I forgot to identify this string on purpose</p> 

<input TYPE- 'button" onclick="missing()" value=" Strings needing translation" 

id="buttonl" name="buttonl"> 

</body> 

<script LANGUAGE="JSCRIPT"> 
function missingQ { 
i=lcid.value 
if(i>0){ 

lp=ml[i] 

} 

search=document . all 
for(i=0;i<search.length;i-H-) { 

//if(search[i].className < 1 8l8l test.length > 0)alertCNot marked for 
translation\n'+test) 

if(search[i].className > 0){ 

test=search[i] .innerHTML 
clid=search[i] .className 
txt=lp[clid] 

if(typeof(txt)!='string') 

alert(*class-H-clid+'\nis missing a translation of 
W+search[i]. innerHTML) 

} 
} 

} 

function translate(){ 

i=lcid.value 

if(i>0){ 

lp=ml[i] 

} 

search=document. all 
for(i=0;i<search.length;i-H-) 

if(search[i].classNanie > 0){ 

txt=lp[search[i]. className] 

//alert(typeof(txt)) 

if (typeof(txt)="string") 

if (txt.length > 0) search[i].innerHTML=txt 
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} 

} 

</script> 
</html> 

Figure 2 shows the Enghsh language text version of this Web document 202 when 
viewed with a Web browser 200. In this example, English is the default language. A 
select box 204 is displayed on the Web document 202. This select box 204 identifies the 
language of the Web document 202 currently displayed. In Figure 2, "English" is 
identified in the select box 204. Accordingly, the text of the Web document 202 is 
displayed in the English language. 

Figure 3 depicts the Web browser 200 and Web document 202 of Figure 2. 
However, in Figure 3, a user has clicked on (z.e selected) the select box 204. Once 
selected, the select box 204 displays a list of languages 300 supported by the Web 
document 202. In this example, the list of languages 300 includes English, French, 
Spanish and German. Of course, the present invention is dynamic and enables a Web 
document to support any number of languages. 

Figure 4 shows the Web browser 200 and Web document 202 of Figure 2, after a 
user has selected French fi*om the select box 204. After the user selected French, the 
Web browser 200 searches the Web document 202 for identifiers for each phrase and/or 
word contained therein. The Web browser 200 then, using the identifiers in the HTML, 
substitutes the French translation for each phrase and/or word contained in the Web 
document 202. However, if a translation is not available for any phrase and/or word (in 
this case French), then the language of the text from the original Web document is 
maintained. In this example, the Web document was not provided with a French 
translation for the phrase "Original text is shown if no translation." Accordingly, this 
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sentence was displayed in English (Le, the language of the text from the original Web 
document). Nevertheless, the remainder of the Web document 202 was properly 
translated into French, as requested by the user. 

Figure 5 similarly shows the Web browser 200 and Web document 202 of Figure 
2, after a user has selected Spanish from the select box 204. After the user selected 
Spanish, the Web browser 200 searches the Web document 202 and substitutes the 
Spanish translation for each phrase and/or word contained therein. Again, if a Spanish 
translation is not available for any phrase and/or word, then the language of the text from 
the original Web document is maintained. In this example, the Web document was not 
provided with a Spanish translation for the phrase "Original text is shown if no 
translation." Accordingly, this sentence was displayed in English (i.e. the language of the 
text from the original Web document). Nevertheless, the Web browser 200 translated the 
remainder of the Web document 202 into Spanish, as requested by the user. 

Lastly, Figure 6 shows the Web browser 200 and Web document 202 of Figure 2, 
after a user has selected German from the select box 204. After the user selected 
German, the Web browser 200 searches the Web document 202 and substitutes the 
German translation for each phrase and/or word contained therein. As with the other 
languages, if a German translation is not available for any phrase and/or word, then the 
language of the text from the original Web document is maintained. The Web document 
202 in this example was not provided with a German translation for the phrase "Original 
text is shown if no translation." Accordingly, this sentence was displayed in English {Le. 
the language of the text from the original Web document). However, the Web browser 
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200 translated the remainder of the Web document 202 into German, as requested by the 
user. 

Thus, the present invention has been described in the foregoing specification with 
reference to specific exemplary embodiments thereof It will be apparent to those skilled 
in the art, that a person understanding this invention may conceive of changes or other 
embodiments or variations, which utihze the principles of this invention without 
departing from the broader spirit and scope of the invention as set forth in the appended 
claims. All are considered within the sphere, spirit, and scope of the invention. The 
specification and drawings are, therefore, to be regarded in an illustrative rather than 
restrictive sense. Accordingly, it is not intended that the invention be limited except as 
may be necessary in view of the appended claims. 
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